<!--  -->
<template>
  <div class="container">
    <!-- needText="添加信息" -->
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="plus"
      @clickLeft="goBack"
      >选择申请人信息</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <p class="title">请填写申请人的信息（必填）:</p>
      <van-form class="v-form" @submit="onSubmit"
        ><van-cell
          @click="add"
          :title="selectNow ? selectNow.patientName : '选择就诊人'"
          is-link
        />
        <!-- <van-field
          readonly
          clickable
          name="area"
          :value="areavalue"
          label="地区选择"
          placeholder="点击选择省市区"
          @click="showArea = true"
        />
        <van-popup v-model="showArea" position="bottom">
          <van-area
            :area-list="areaList"
            @confirm="onConfirm"
            @cancel="showArea = false"
          />
        </van-popup> -->

        <p class="title2">阅片服务：医生远程影像阅片</p>
        <p class="title">病情描述:</p>

        <van-field
          name="allergy"
          label="是否有过敏史"
          :rules="[{ required: true, message: '请填写' }]"
        >
          <template #input>
            <van-radio-group v-model="allergy" direction="horizontal">
              <van-radio name="0">是</van-radio>
              <van-radio name="1">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          name="diseases"
          label="是否有重大病史和慢性病史"
          :rules="[{ required: true, message: '请填写' }]"
        >
          <template #input>
            <van-radio-group v-model="diseases" direction="horizontal">
              <van-radio name="0">是</van-radio>
              <van-radio name="1">否</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="message"
          name="message"
          rows="2"
          autosize
          label="病情"
          type="textarea"
          maxlength="1000"
          placeholder="请您先描述病情（例如发病时间，主要症状，其他病况等），以便医生了解病情，给出建议"
          show-word-limit
        />
        <p class="title" style="margin-top: 0.1rem">需要医生提供的帮助 :</p>
        <p class="title3">
          可向医生询问是否可去门诊就诊，如何控制病情，是否需要手术等问题
        </p>
        <van-field
          v-model="message2"
          name="message2"
          rows="2"
          autosize
          label="描述"
          type="textarea"
          maxlength="1000"
          show-word-limit
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div>
      </van-form>
    </div>
    <van-popup
      v-model="formShow"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
      <div class="child">
        <p class="t">选择就诊人信息</p>
        <van-button
          @click="mesShow = true"
          color="#7232dd"
          size="small"
          type="primary"
          >添加就诊人</van-button
        >
        <van-radio-group @change="radioChange" v-model="mesRadio">
          <div class="box" v-for="(item, index) in patientList" :key="index">
            <van-radio :name="index"></van-radio>
            <van-image
              v-if="item.patientGender && item.patientGender == '0'"
              width="0.5rem"
              height="0.5rem"
              :src="require('../../assets/images/boy.png')"
            />
            <van-image
              v-else
              width="0.5rem"
              height="0.5rem"
              :src="require('../../assets/images/girl.png')"
            />
            <div class="left">
              <div class="up">
                <p>{{ item.patientName }}</p>
                <p>
                  {{
                    item.patientGender && item.patientGender == "0"
                      ? "男"
                      : "女"
                  }}
                </p>
                <p>{{ item.patientAge }}岁</p>
              </div>
              <div class="down">
                <p>手机号码：{{ item.phone }}</p>
              </div>
            </div>
            <p class="right" @click="editer(item)">编辑</p>
          </div>
          <div class="null-box" v-if="patientList.length == 0">
            <img src="@/assets/images/null.png" alt="" />
            <p>暂无就诊人</p>
          </div>
        </van-radio-group>
        <van-button class="btn" @click="selected" type="primary" block
          >确认</van-button
        >
      </div> </van-popup
    ><van-popup
      v-model="mesShow"
      @close="closePop"
      closeable
      position="bottom"
      :style="{ height: '65%' }"
    >
      <div class="content" style="margin-top: 0.55rem">
        <p class="title">请填写就诊人的信息（必填）:</p>
        <van-form class="v-form" @submit="onSubmitPainte">
          <van-field
            v-model="name"
            name="name"
            label="姓名"
            placeholder="请输入姓名"
            :rules="[{ required: true, message: '请输入姓名' }]"
          />
          <van-field
            name="sex"
            label="性别"
            :rules="[{ required: true, message: '请选择性别' }]"
          >
            <template #input>
              <van-radio-group v-model="sex" direction="horizontal">
                <van-radio name="0">男</van-radio>
                <van-radio name="1">女</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field
            v-model="age"
            name="age"
            type="number"
            maxlength="2"
            label="年龄"
            placeholder="请输入年龄"
            :rules="[{ required: true, message: '请输入年龄' }]"
          />
          <van-field
            v-model="phone"
            name="phone"
            label="手机"
            placeholder="请输入手机"
            :rules="[{ required: true, message: '请输入手机' }]"
          />

          <div style="margin: 16px">
            <van-button
              v-if="edShow"
              round
              block
              type="info"
              native-type="submit"
              >编辑</van-button
            >
            <van-button
              style="margin-top: 0.1rem"
              v-if="edShow"
              round
              @click="deleteNow"
              block
              type="danger"
              >删除</van-button
            >
            <van-button v-else round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div></van-popup
    >
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import {
  setOrder,
  setPatientinfo,
  getPatientinfo,
  delPatientinfo,
  updatePatientinfo,
} from "@/api/doctor";
import { Toast, Dialog } from "vant";
import { mapGetters } from "vuex";
export default {
  name: "applyRead",
  data() {
    return {
      name: "",
      age: "",
      sex: "",
      phone: "",
      allergy: "",
      diseases: "",
      message: "",
      message2: "",
      doItems: "",
      usItems: "",
      areavalue: "",
      showArea: false,
      areaList: {},
      mesRadio: "",
      formShow: false,
      mesShow: false,
      patientList: [],
      selectNow: null,
      edShow: false,
      edNow: null,
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["userData"]),
  },

  created() {
    window.scroll(0, 0);
    this.doItems = this.$route.params.items || "";
    this.usItems = this.$route.params.usitems || "";
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      this.$router.replace({ path: "/doctorList" });
    },
    onSubmit(values) {
      let { usItems, doItems, selectNow } = this;
      if (selectNow == null) {
        Toast.fail("请选择就诊人");
      } else {
        let data = {
          dsId: usItems.dsId,
          doctorId: doItems.id,
          orderStatus: 1,
          advise: values.message,
          patientName: selectNow.patientName,
          doctorName: doItems.realName,
          patientGender: selectNow.patientGender,
          patientAge: selectNow.patientAge,
          phone: selectNow.phone,
          allergicHistory: values.allergy,
          diseaseHistory: values.diseases,
          adviseHelp: values.message2,
        };
        setOrder(data).then((res) => {
          if (res.data.status == 200) {
            Toast.success("提交成功");
            setTimeout(() => {
              this.$router.replace({ path: "/detailList" });
            }, 1000);
          } else {
            Toast.fail(res.data.msg);
          }
        });
      }
    },
    //就诊add
    onSubmitPainte(values) {
      if (this.edShow) {
        let data = {
          userId: JSON.parse(this.userData).id,
          id: this.edNow.id,
          patientName: values.name,
          patientGender: values.sex,
          patientAge: values.age,
          phone: values.phone,
        };
        updatePatientinfo(data).then((res) => {
          if (res.data.status == 200) {
            this.mesShow = false;
            this.getPatientinfos();
          } else {
            Toast.fail(res.data.msg);
          }
        });
      } else {
        let data = {
          userId: JSON.parse(this.userData).id,
          patientName: values.name,
          patientGender: values.sex,
          patientAge: values.age,
          phone: values.phone,
        };
        setPatientinfo(data).then((res) => {
          if (res.data.status == 200) {
            this.mesShow = false;
            this.getPatientinfos();
          } else {
            Toast.fail(res.data.msg);
          }
        });
      }
    },
    //
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join("/");
      this.showArea = false;
    },
    add() {
      this.formShow = true;
      this.getPatientinfos();
    },
    // 获取就诊人
    getPatientinfos() {
      let data = {
        userId: JSON.parse(this.userData).id,
      };
      getPatientinfo(data).then((res) => {
        if (res.data.status == 200) {
          this.patientList = res.data.info;
        } else {
          Toast.fail(res.data.msg);
        }
      });
    },
    // 单选
    radioChange(val) {
      this.selectNow = this.patientList[val];
    },
    // 确认选择
    selected() {
      if (this.selectNow != null) {
        this.formShow = false;
      } else {
        Toast.fail("请选择就诊人");
      }
    },
    // 编辑
    editer(item) {
      this.mesShow = true;
      this.edShow = true;
      this.edNow = item;
      this.name = item.patientName;
      this.age = item.patientAge;
      this.sex = item.patientGender;
      this.phone = item.phone;
    },
    // 删除
    deleteNow() {
      let data = {
        userId: JSON.parse(this.userData).id,
        id: this.edNow.id,
      };
      delPatientinfo(data).then((res) => {
        if (res.data.status == 200) {
          this.mesShow = false;
          this.edNow = null;
          Toast.success("删除成功");
        } else {
          Toast.fail("删除失败");
        }
      });
    },
    closePop() {
      this.edShow = false;
      this.name = "";
      this.age = "";
      this.sex = "";
      this.phone = "";
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  padding-bottom: 0.2rem;
  & .content {
    width: 95%;
    margin: auto;
    margin-top: 0.15rem;
    background: #fff;
    border-radius: 0.1rem;
    box-shadow: 0px 0px 10px #cccccc;
    padding: 0.2rem 0 0.1rem 0;
    & .title {
      font-size: 0.16rem;
      font-weight: 600;
      text-align: left;
      text-indent: 0.15rem;
      margin-bottom: 0.1rem;
    }
    & .title2 {
      font-size: 0.14rem;
      text-align: left;
      text-indent: 0.15rem;
      margin: 0.15rem 0;
    }
    & .title3 {
      display: block;
      font-size: 0.12rem;
      color: #999;
      margin: 0 0.15rem;
      text-align: left;
      line-height: 0.2rem;
    }
    & .van-cell {
      text-align: left;
    }
  }
}
.child {
  margin-top: 0.2rem;
  & /deep/ .van-icon {
    border: 1px solid #999999 !important;
  }
  & .t {
    margin-bottom: 0.2rem;
    font-weight: bold;
  }
  & .box {
    background: #e7e7e7;
    width: 95%;
    margin: auto;
    margin-top: 0.1rem;
    border-radius: 0.1rem;
    display: flex;
    align-items: center;
    height: 0.6rem;
    & .van-radio {
      width: 8%;
      margin-left: 0.1rem;
    }
    & .left {
      width: 75%;
      text-align: left;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      & .up {
        font-size: 0.14rem;
        display: flex;
        align-items: center;
        margin-bottom: 0.08rem;
        & p {
          margin-left: 0.1rem;
        }
        & p:nth-of-type(1) {
          font-size: 0.16rem;
        }
      }
      & .down {
        font-size: 0.14rem;
        & p {
          margin-left: 0.1rem;
        }
      }
    }
    & .right {
      font-size: 0.14rem;
      line-height: 0.6rem;
      border-left: 1px solid #c5c5c5;
      width: 20%;
    }
  }
  & .btn {
    position: fixed;
    bottom: 0.1rem;
    width: 95%;
    left: 50%;
    transform: translate(-50%);
  }
}
.null-box {
  margin-top: 1rem;
  & img {
    width: 1.2rem;
  }
  & p {
    font-size: 0.16rem;
    color: #666666;
  }
}
</style>